<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="../img/WQA2YQ1$)XZ$I)61K$)WUOP_03.jpg" type="image/x-icon">
    <!-- <link rel="stylesheet" href="../css/iconfont.css"> -->
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../header_footer/css/cakeheader.css">
    <script src="../js/jquery-1.9.1.min.js"></script>
    <style>
        #jwg-main {
            width: 100%;
            height: 547px;
            background: url(https://static.21cake.com/themes/site/img/passport-banner.jpg) no-repeat center;
        }

        .jwg-maincon {
            width: 1202px;
            height: 547px;
        }

        .jwg-box {
            width: 389px;
            height: 358px;
            position: absolute;
            top: 150px;
            right: 240px;
            border: 1px solid #eeeeee;
            background: white;
        }

        .jwg-box>input {
            width: 189px;
            height: 80px;
            background: white;
            color: #c9c9c9;
            border: 0;
            outline: 0;
            font-size: 16px;
        }

        .jwg-box .on {
            color: #000;
        }

        .jwg-box>div {
            width: 389px;
            height: 210px;
            display: none;
        }

        .jwg-box .active {
            width: 389px;
            height: 278px;
            display: block;
        }

        #jwg-active>input {
            width: 303px;
            height: 38px;
            border: 0;
            outline: 0;
            border: 1px solid #e9e9e9;
            margin-left: 45px;
            margin-top: 10px;
            text-indent: 5px;
        }

        #jwg-active .jwg-dl {
            width: 303px;
            height: 50px;
            border: 0;
            outline: 0;
            color: white;
            background: #442818;
            margin-top: 40px;
            cursor: pointer;
        }

        #jwg-active .jwg-an {
            width: 12px;
            height: 12px;
            color: #000;
            background: white;
            cursor: pointer;
            outline: 0;
        }

        .jwg-box .jwg-lj {
            margin-top: 15px;
            width: 344px;
            height: 18px;
            margin-left: 45px;
        }

        .jwg-lj span {
            display: inline-block;
            color: #744f3a;
        }

        .jwg-lj a {
            float: right;
            color: #744f3a;
            margin-left: 23px;
        }

        .jwg-zc {
            margin-right: 45px;
        }

        #jwg-zhdl>input {
            margin-left: 45px;
            margin-top: 10px;
            width: 303px;
            height: 38px;
            text-indent: 5px;
            outline: 0;
            border: 0;
            border: 1px solid #cccccc;
        }

        #jwg-zhdl .jwg-sj {
            width: 140px;
            height: 38px;
        }

        #jwg-zhdl .jwg-yzm {
            display: block;
            width: 150px;
            height: 38px;
            float: right;
            cursor: pointer;
            background: #FAFAFA;
            border: 1px solid #EBEBEB;
            border-radius: 2px;
            color: #442818;
            text-align: center;
            line-height: 38px;
            margin-top: 10px;
            margin-right: 40px;
        }

        #jwg-zhdl .jwg-dlan {
            width: 303px;
            height: 50px;
            border: 0;
            outline: 0;
            color: white;
            background: #442818;
            margin-top: 40px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="zfg-cake-header"></div>
    <script>
        $(function () {
            // 引头部
            $('.zfg-cake-header').load('../header_footer/cakeheader.html')
            // 尾部
            $('.zfg-cake-foot').load('../header_footer/Foot/html/foot.html')
        })
    </script>
    <div id="jwg-main">
        <div class="jwg-maincon">
            <div class="jwg-box">
                <input class="on" type="button" value="账号密码登录">
                |
                <input type="button" value="手机验证码登录">
                <div class="active" id="jwg-active">
                    <input type="text" placeholder="请输入您的账号" id="inputuser">
                    <input type="password" placeholder="输入密码" id="inputpass">
                    <input type="button" value="登录" class="jwg-dl" id="btn">
                    <div class="jwg-lj">
                        <span>
                            <input type="checkbox" value="" class="jwg-an">
                            &nbsp;记住账号
                        </span>
                        <a href="../page/register.html" class="jwg-zc">去注册</a>
                        <a href="javascript:;">忘记密码</a>
                    </div>
                </div>
                <div id="jwg-zhdl">
                    <input type="text" placeholder="请输入您的手机号">
                    <input type="text" placeholder="短信验证码" class="jwg-sj">
                    <a href="javascript:;" class="jwg-yzm">获取验证码</a>
                    <input type="button" value="登录" class="jwg-dlan">
                    <div class="jwg-lj">
                        <span>
                            <input type="checkbox" value="" class="jwg-an">
                            &nbsp;记住账号
                        </span>
                        <a href="../page/register.html" class="jwg-zc">去注册</a>
                        <a href="javascript:;">忘记密码</a>
                    </div>
                </div>
            </div>
            <script>
                var aBtn = document.querySelectorAll('.jwg-box>input')
                var aDiv = document.querySelectorAll('.jwg-box>div')

                aBtn.forEach(function (ele, index) {
                    ele.onclick = function () {
                        for (var i = 0; i < aBtn.length; i++) {
                            // 清空所有按钮样式
                            aBtn[i].className = ''
                            // 清除所有div样式
                            aDiv[i].className = ''
                        }
                        // 当前按钮加class
                        this.className = 'on'
                        aDiv[index].className = 'active'
                    }
                })
            </script>
        </div>
    </div>
    <script src="../js/ajax.js"></script>
    <script src="../js/login.js"></script>
    <div class="zfg-cake-foot"></div>
</body>

</html>